<template>
  <div class="visual-screen">
    <div class="visual-screen_title"></div>
    <div class="visual-screen_main" style="height:100%">
      <div class="visual-screen_main-left" style="width:25%;height:100%">
        <VsRealTimeTran class="content-width" v-bind:approval="approvalInfo" />
        <VsLandType class="content-width" />
        <VsDoingCount class="content-width" v-bind:dataList="arrayData" />
      </div>
      <div class="visual-screen_main-center" style="width:50%">
        <VsDisplayList />
        <VsCenterMap />
        <VsTrendByMap />
      </div>
      <div class="visual-screen_main-right" style="width:25%">
        <VsSysRightHeader
          class="content-width"
          @click="goToIndex"
        ></VsSysRightHeader>
        <VsViolationType class="content-width" />
        <VsViolationCount class="content-width" />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import SvgIcon from "./components/SvgIcon";
Vue.component("svg-icon", SvgIcon);
import { getOutSideDataApi } from "@/api/statistics/outside";
import VsRealTimeTran from "./components/RealTimeTran/index";
import VsLandType from "./components/LandType/index";
import VsDoingCount from "./components/DoingCount/index";
import VsSysRightHeader from "./components/SysRightHeader/index";
import VsViolationType from "./components/ViolationType/index";
import VsViolationCount from "./components/ViolationCount/index";
import VsTrendByMap from "./components/TrendByMap/index";
import VsDisplayList from "./components/DisplayList/index";
import VsCenterMap from "./components/CenterMap/index";
export default {
  name: "VisualScreen",
  components: {
    VsCenterMap,
    VsDisplayList,
    VsTrendByMap,
    VsViolationCount,
    VsViolationType,
    VsSysRightHeader,
    VsDoingCount,
    VsLandType,
    VsRealTimeTran
  },
  filters: {},
  props: {},
  data() {
    return {
      approvalInfo: {
        total: 0,
        pizhun: 0,
        newBuild: 0,
        expand: 0,
        rebuild: 0,
        nowDo: 0,
        overTime: 0
      },
      arrayData: []
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getOutSideData();
   
  },
  mounted() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  methods: {
    goToIndex() {
      this.$router.push({
        path: "/login"
      });
    },
    getOutSideData() {
      getOutSideDataApi()
        .then(res => {
          res.data.data.forEach(element => {
            this.approvalInfo.total += element.total;
            this.approvalInfo.pizhun +=
              element.approvalInfo.second + element.approvalInfo.third;
            this.approvalInfo.newBuild += element.approvalInfo.newBuild;
            this.approvalInfo.expand += element.approvalInfo.expand;
            this.approvalInfo.rebuild += element.approvalInfo.rebuild;
            this.approvalInfo.nowDo += element.approvalInfo.nowDo;
            this.approvalInfo.overTime += element.approvalInfo.overTime;
          });
          this.arrayData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="less">
@import "index.less";
</style>
